<template>
  <Table
    ref="tableRef"
    :columns="data.columns"
    :toolbar="data.toolbar"
    :query="data.query"
    @get-list="getData"
  >
  </Table>
</template>

<script lang="ts" setup name="channelReconciliationList">
import Table from '@/components/table/index.vue';
import moment from 'moment';
import { queryDicByParent } from '@/service/apis/api';
import {
  pagingEquipmentInfo,
  EXPORT_EQUIPMENTINFO,
} from '@/service/apis/statistical';
import { exportFile } from '@/utils/utils';

const route = useRoute();

const tableRef = ref();

const data = reactive({
  detailData: {} as any,
  columns: [
    {
      prop: 'equipmentName',
      label: '电桩名称',
    },
    {
      prop: 'equipmentCode',
      label: '电桩编码',
    },
    {
      prop: 'stationName',
      label: '归属电站',
    },
    {
      prop: 'channelName',
      label: '平台运营商',
    },
    {
      prop: 'connectorCount',
      label: '终端数量（个）',
      dataType: String,
    },
    {
      prop: 'operationDate',
      label: '投运日期',
      askContent: '以电桩上送第一帧报文日期作为投运日期',
    },

    {
      prop: 'count',
      label: '充电次数（次）',
      dataType: String,
    },
    {
      prop: 'chargedTime',
      label: '累计充电时长（小时）',
      width: 160,
      // dataNum: 4,
    },
	{
	  prop: 'totalPower',
	  label: '累计充电量（度）',
	  width: 160,
	  // dataNum: 4,
	},
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'pileUsageStatisticsList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_EQUIPMENTINFO,
          '电桩使用统计',
          tableRef.value?.getForm()
        );
      },
    },
  ],
  query: [
    {
      label: '归属电站',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入归属电站',
      },
    },
    {
      label: '电桩编码',
      prop: 'equipmentCode',
      comName: 'input',
      props: {
        placeholder: '请输入电桩编码',
      },
    },
    {
      label: '投运日期',
      prop: 'data',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
  ],
});

const getData = (page: any, search: any) => {
  nextTick(() => {
    let form: any = search.ruleForm;
    if (form.data && form.data.length > 0) {
      form.startTime = form.data[0];
      form.endTime = form.data[1];
    } else {
      form.startTime = '';
      form.endTime = '';
    }
    form.equipmentGroup = 1;
    pagingEquipmentInfo(form, page).then((res: any) => {
      if (res) {
        if (
          page.pageNo !== 1 &&
          (!res.dataList || res.dataList?.length === 0)
        ) {
          page.pageNo--;
          getData(page, search);
          return;
        }
        nextTick(() => {
          tableRef.value.setTable({
            total: res.totalCount,
            table: res.dataList,
          });
        });
      }
    });
  });
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
.card {
  padding: 30px 0;
  margin: 20px 0;
  .card-content {
    width: 100%;
    .card-data {
      .card-item {
        display: flex;
        text-align: left;
        .title {
          margin-left: 12px;
        }
        .iconfont {
          font-size: 56px;
        }
      }
    }
  }
}
</style>